型態轉換

雖然 JavaScript 在我們指定變數時會自動匹配一個正確的型態，但有時在開發中我們會需要另外轉換型態以便進行運算或判斷，以下就來介紹幾種強制轉換變數型態的方法！

轉字串

方法一：toString()

toString() 是一個 JavaScript 方法 (method)，會回傳指定變數的字串型態，同時也支援進制轉換(例如二進制、八進制間的轉換)，但無法處理 null 和 undefined 轉字串。
語法：

變數.toString();

範例：

let a = 123; // 型態為 number
b = a.toString(); // 將 a 轉為字串型態並指向變數 b
console.log(a); // 123 (數字)
conosle.log(typeof(a)); // number
console.log(b); // "123" (字串)
conosle.log(typeof(b)); // string

方法二：String()

String() 屬於建構函式，同樣也能將變數轉為字串並回傳，與 toString 不同的是它可以處理 null 和 undefined 轉字串，但無法處理進制之間的轉換。
語法：

String(變數);

範例：

let a = String(123); // "123"
let b = String(null); // "null"
let c = String(undefined); // "undefined"

轉數字

在講變數轉數字的方法之前要先來說一個觀念，其實在變數中，數字型態又細分為幾種，而最常見的有 Integer (整數) 和 Float (浮點數)。整數，顧名思義就是以 1 為最小單位增減的數字，例如 1、-1等；而浮點數則是指含有小數的數，例如 3.14、-0.99，雖然他們同屬 Number 型態，但在某些用法上還是有所不同。

方法一：parseInt()

parseInt() 會從字串的第一個字元開始擷取出有效整數並轉為 number 型態，直到出現非數字字元，若第一個字元不是數字則回傳 NaN，而對於非字串型態的變數，parseInt 會先將其轉為 string 再進行解析。
Tips: 依據 parseInt 的特性，可以被用來進行小數 (浮點數) 轉整數的運算
語法：

parseInt(變數);

範例：

let a = parseInt("123"); // 123
let d = parseInt(3.14); // 3 (可以達到無條件捨去取整數的效果)
parseInt("12b3"); // 12 (parseInt 會依照順序取數字直到出現非數字時停止)
parseInt("a12b3"); // NaN (第一個字元 a 就不是數字，回傳 NaN)

方法二：parseFloat()

parseFloat() 與 parseInt 用法相似，差別在於 parseFloat 擷取的是浮點數，直到出現非數字字元，對於非字串型態的變數，parseInt 一樣會先將其轉為 string 再進行解析。
語法：

parseFloat(變數);

範例：

let a = parseFlaot("123"); // 123 (parseFloat 一樣可以轉換整數)
parseFloat("234.01f2"); // 234.01 (依照順序取數字直到出現非數字時停止)
parseFloat("a234.01"); // NaN (第一個字元 a 就不是數字，回傳 NaN)

方法三：Number()

幾本上 parseInt() 和 parseFloat() 是專門將 string 轉為 number 的方法，所以在進行轉換時都會先將變數轉為字串型態，規則也比較寬鬆相較而言 Number() 就比較嚴謹，當內容無法轉換時會直接回傳 NaN，下面就讓我們來看看 Number() 幾個重要的規則：

• 若原始變數為 string 型態
  • 若為全數字字串，例如 "123"、"3.14"，則直接轉為 number
  • 若為全數字字串 + 前後空白，例如 " 123 "，則忽略空白回傳數字 123
  • 若數字字串中間穿插空白，例如 "1 23 " 則為 NaN
  • 若為空字串或空白字串，例如 ""、" "，則為 0
  • 字串包含其他字元則為 NaN
• 若原始變數為 boolean，則 true 為 1、false 為 0
• 若原始值為 undefined，則回傳 NaN
• 若原始值為 null，則回傳 0

語法：

Number(變數);

範例：

Number("1233"); // 1233
Number(" 122 "); // 122 (忽略前後空白)
Number("1 345"); // NaN (字串中間有空白則為 NaN)
Number("  "); // 0
Number("12as3444"); // NaN (字串中包含其他非數字字元都是 NaN)
Number(true); // 1
Number(undefined); // NaN
Number(null); // 0 (空值)

parseInt() 和 parseFloat() 無法轉換 Boolean 型態，因為會先將值轉為 string 再解析，所以變成 true -> "true" -> NaN

轉 Boolean

Boolean()

Boolean() 可以將值轉為 Boolean，規則很簡單，除了 0、NaN、undefined、null、"" (空字串) 等 5 個值為 false 之外，其他任何值都為 true。
語法：

Boolean(變數);

範例：

Boolean("1233"); // true
Boolean("   "); // true (空白字串為 true)
Boolean(""); // false (空字串為 false)
Boolean(0); // false
Boolean(1); // true
Boolean(null); // false

上一篇：[快速入門前端 38] JavaScript：資料型態 (1) 基本資料型態和複合資料型態
系列文章列表：[快速入門前端] 系列文章索引列表